<!-- 账单减免 -->
<template>
  <div style="padding: 15px 30px">
    <el-form class="padding-top-15" label-width="120px" size="small" label-position="right">
      <el-row>
        <el-col :span="8">
          <el-form-item label="项目名称">
            <el-input :readonly="true" v-model="model.projectName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请部门">
            <el-input :readonly="true" v-model="model.orgName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="申请人">
            <el-input :readonly="true" v-model="model.applyUserName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同名称">
            <el-input :readonly="true" v-model="model.contractName">
              <template slot="append">
                <el-button type="text" @click="goToInfo(model.contractKey, model.contractType)">查看</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="退场时间">
            <el-date-picker :readonly="true" v-model="model.terminationDate" type="date" value-format="timestamp"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发起方">
            <el-input :readonly="true" v-model="model.applyUserName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="退场原因">
            <el-input :readonly="true" v-model="model.terminationReason"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="对方名称">
            <el-tag type="info" v-for="item in model.partnerList" :key="item.primaryKey" class="margin-right-15">{{ item.partnerName }}</el-tag>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24">
          <el-form-item label="租赁资产">
            <el-input :readonly="true" v-model="model.name9"></el-input>
          </el-form-item>
        </el-col> -->
      </el-row>
    </el-form>
    <template v-if="isPayType">
      <div style="display: flex; justify-content: space-between" class="padding-top-15">
        <div class="font-size-16 font-weight-700">退还金额</div>
        <div></div>
      </div>
      <el-table :data="tableData" class="table-margin" style="width: 100%" border>
        <el-table-column label="序号" header-align="center" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="总计">
          <template slot-scope="scope">
            <span>{{ scope.row.totalMoneyBack | formatMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="押金">
          <template slot-scope="scope">
            <span>{{ scope.row.returnDeposit | formatMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="广告费">
          <template slot-scope="scope">
            <span>{{ scope.row.returnVenueAdFee | formatMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="场地租赁费">
          <template slot-scope="scope">
            <span>{{ scope.row.returnVenueRentalFee | formatMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="水费">
          <template slot-scope="scope">
            <span>{{ scope.row.returnWaterFee | formatMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="电费">
          <template slot-scope="scope">
            <span>{{ scope.row.returnElectricityFee | formatMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="燃气费">
          <template slot-scope="scope">
            <span>{{ scope.row.returnGasFee | formatMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="车位费">
          <template slot-scope="scope">
            <span>{{ scope.row.returnParkingFee | formatMoney }}</span>
          </template>
        </el-table-column>
      </el-table>

      <div style="display: flex; justify-content: space-between" class="padding-top-15">
        <div class="font-size-16 font-weight-700">收取金额</div>
        <div></div>
      </div>
      <el-table :data="tableData" class="table-margin" style="width: 100%" border>
        <el-table-column label="序号" header-align="center" align="center">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="总计">
          <template slot-scope="scope">
            <span>{{ scope.row.totalMoneyGather | formatMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="租金">
          <template slot-scope="scope">
            <span>{{ scope.row.chargeRentFee | formatMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="管理费">
          <template slot-scope="scope">
            <span>{{ scope.row.chargeManagementFee | formatMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="车位费">
          <template slot-scope="scope">
            <span>{{ scope.row.chargeParkingFee | formatMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="滞纳金">
          <template slot-scope="scope">
            <span>{{ scope.row.chargeLateFee | formatMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="赔偿">
          <template slot-scope="scope">
            <span>{{ scope.row.chargeCompensate | formatMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="水费">
          <template slot-scope="scope">
            <span>{{ scope.row.chargeWaterFee | formatMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="电费">
          <template slot-scope="scope">
            <span>{{ scope.row.chargeElectricityFee | formatMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="燃气费">
          <template slot-scope="scope">
            <span>{{ scope.row.chargeGasFee | formatMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="共享空间使用费">
          <template slot-scope="scope">
            <span>{{ scope.row.chargeSharedSpaceFee | formatMoney }}</span>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <div style="display: flex; justify-content: space-between" class="padding-top-15">
      <div class="font-size-16 font-weight-700">附件</div>
    </div>
    <template v-if="model.attachmentList && model.attachmentList.length > 0">
      <a class="file-box font-size-16 padding-bottom-30" v-for="(item, index) in model.attachmentList"  :key="index" @click="uploadLoad(item.fileUrl)">
        {{ item.fileTitle }}
      </a>
    </template>

    <section class="padding-bottom-30" v-else>暂无附件 ！</section>

    <approve-info></approve-info>
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import approveInfo from './approveInfo.vue';
  import { apiAbolishContractInfo } from '../../api/contract';

  export default {
    data() {
      return {
        model: {
          attatchementList: [
            {
              name: '退场函.pdf',
            },
          ],
        },
        tableData: [],
        isPayType: false,
      };
    },

    mounted() {
      this.getBillInfo();
    },
    //方法集合
    methods: {
      goToInfo(contractKey, contractType) {
        let url = '/businessAssets/ContractManage/drafting?isInfo=true&isTodo=true&contractKey=' + contractKey + '&contractType=' + contractType;
        window.open(url);
      },
      //详情
      async getBillInfo() {
        let res = await apiAbolishContractInfo({
          primaryKey: this.$route.query.infoKey,
        });
        res.totalMoneyGather = 0;
        res.totalMoneyBack = 0;
        this.judgeCcontractType(res.contractType);
        let gatherSubset = ['chargeRentFee', 'chargeManagementFee', 'chargeParkingFee', 'chargeLateFee', 'chargeCompensate', 'chargeWaterFee', 'chargeElectricityFee', 'chargeGasFee', 'chargeSharedSpaceFee'];
        let backSubset = ['returnDeposit', 'returnVenueAdFee', 'returnVenueRentalFee', 'returnWaterFee', 'returnElectricityFee', 'returnGasFee', 'returnParkingFee'];
        gatherSubset.forEach(item => {
          res.totalMoneyGather += Number(res[item]);
        });
        backSubset.forEach(item => {
          res.totalMoneyBack += Number(res[item]);
        });
        let list = [res];
        this.model = res;
        this.tableData = list;
      },

      //判断合同类型
      judgeCcontractType(contractType) {
        if (contractType == 'ZL' || contractType == 'GGZL' || contractType == 'LSCD' || contractType == 'WRSB' || contractType == 'TCCYY') {
          this.isPayType = true; //租赁类
        } else {
          this.isPayType = false;
        }
      },

      //下载
      uploadLoad(url) {
        let a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    },
    components: { approveInfo }
  };
</script>
<style scoped lang="scss">
  .flex-box {
    height: 50px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;

    justify-content: space-between;
    .large-title {
      font-size: 18px;
    }
  }
  .table-margin {
    margin: 15px 0;
  }

  .file-box {
    line-height: 34px;
    cursor: pointer;
  }
</style>
